<template>
  <div class="tinymce-container editor-container" id="editor-container">
    <textarea class="tinymce-textarea" id="tinymceId"></textarea>
  </div>
</template>

<script>
// import editorImage from "./components/editorImage";
import plugins from "./plugins";
import toolbar from "./toolbar";
import {upLoad} from '@/api/common.js'
import request from '@/utils/request'
import axios from 'axios'
// import { upImage } from "@/utils/qiniu.js";

export default {
  name: "tinymce",
  // components: { editorImage },
  props: {
    test: String,
    id: {
      type: String
    },
    value: {
      type: String,
      default: ""
    },
    toolbar: {
      type: Array,
      required: false,
      default() {
        return [];
      }
    },
    menubar: {
      default: "file edit insert view format table"
    },
    height: {
      type: Number,
      required: false,
      default: 1440
    }
  },
  data() {
    return {
      qiniuData: {
        token: "",
        key: Math.random() * 1000000000
      },
      randomKey: Math.random() * 10000,
      hasChange: false,
      hasInit: false,
      tinymceId: "tinymceId"
    };
  },
  watch: {
    value(val) {
      if (!this.hasChange && window.tinymce) {
        this.$nextTick(() => {
          window.tinymce.get(this.tinymceId).setContent(val)
        });
      }
    }
  },
  mounted() {
    this.initTinymce();
  },
  activated() {
    this.initTinymce();
  },
  deactivated() {
    this.destroyTinymce();
  },
  methods: {
    initTinymce() {
      const _this = this;
      window.tinymce.init({
        selector: "#tinymceId",
        height: 600,
        body_class: "panel-body ",
        object_resizing: false,
        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
        menubar: this.menubar,
        plugins: plugins,
        end_container_on_empty_block: true,
        powerpaste_word_import: "clean",
        code_dialog_height: 450,
        code_dialog_width: 1000,
        advlist_bullet_styles: "square",
        advlist_number_styles: "default",
        imagetools_cors_hosts: ["www.tinymce.com", "codepen.io"],
        default_link_target: "_blank",
        content_style: ` * { padding:0; margin:0; }   img {max-width:100% !important; height: auto}`,
        link_title: false,
        language: "zh_CN",
        images_upload_base_path: "",
        invalid_styles: {
          img: "height"
        },
        images_upload_handler: function(blobInfo, succFun, failFun) {
          console.log(blobInfo.blob())
          const formData = new FormData()
          formData.append('file', blobInfo.blob())
          upLoad(formData).then(res => {
            const data= res.data
            succFun(data.imageUrl)
          })
        },
        init_instance_callback: editor => {
          if (_this.value) {
            editor.setContent(_this.value)
          }
          _this.hasInit = true;
          editor.on("NodeChange Change KeyUp SetContent", () => {
            this.hasChange = true;
            this.$emit("input", editor.getContent());
          });
        }
      });
    },
    destroyTinymce() {
      if (window.tinymce.get(this.tinymceId)) {
        window.tinymce.get(this.tinymceId).destroy();
      }
    },
    setContent(value) {
      console.log(value)
      window.tinymce.get(this.tinymceId).setContent(value);
    },
    getContent() {
      window.tinymce.get(this.tinymceId).getContent();
    },
    imageSuccessCBK(arr) {
      const _this = this;
      arr.forEach(v => {
        window.tinymce
          .get(_this.tinymceId)
          .insertContent(`<img class="wscnph" src="${v.url}" >`);
      });
    }
  },
  destroyed() {
    this.destroyTinymce();
  }
};
</script>

<style lang="scss">
.tinymce-container {
  position: relative;
}
.tinymce-container >>> .mce-fullscreen {
  z-index: 10000;
}
.tinymce-container .tinymce-textarea {
  visibility: hidden;
  z-index: -1;
}
</style>
